<!-- JQVMap -->
<link rel="stylesheet" th:href="@{admin/plugins/jqvmap/jqvmap.min.css}">

<section class="content" >
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row"  style="height: 8px"></div>

        <div class="row"  >
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3> [(${dashBoardInfo.articlecounts})] </h3>

                        <p>文章总数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a th:href="@{admin#articles}" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>[(${dashBoardInfo.unpublishedcounts})]</h3>

                        <p>待发布文章</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a th:href="@{admin#articles}" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>[(${dashBoardInfo.commentcounts})]</h3>

                        <p>评论条数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a th:href="@{admin#comments}" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner">
                        <!--<h3>53<sup style="font-size: 20px">%</sup></h3>-->
                        <h3>[(${dashBoardInfo.unauditcommentcounts})]</h3>
                        <p>待审核评论</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a th:href="@{admin#comments}" class="small-box-footer">更多信息 <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

        </div>
        <!-- /.row -->


        <div class="row">
            <!--<section class="col-lg-6 connectedSortable"  >-->

            <!--&lt;!&ndash; Map card &ndash;&gt;-->
            <!--<div class="card bg-gradient-primary">-->
            <!--<div class="card-header border-0">-->
            <!--<h3 class="card-title">-->
            <!--<i class="fas fa-map-marker-alt mr-1"></i>-->
            <!--Visitors-->
            <!--</h3>-->
            <!--&lt;!&ndash; card tools &ndash;&gt;-->
            <!--<div class="card-tools">-->
            <!--<button type="button"-->
            <!--class="btn btn-primary btn-sm daterange"-->
            <!--data-toggle="tooltip"-->
            <!--title="Date range">-->
            <!--<i class="far fa-calendar-alt"></i>-->
            <!--</button>-->
            <!--<button type="button"-->
            <!--class="btn btn-primary btn-sm"-->
            <!--data-card-widget="collapse"-->
            <!--data-toggle="tooltip"-->
            <!--title="Collapse">-->
            <!--<i class="fas fa-minus"></i>-->
            <!--</button>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.card-tools &ndash;&gt;-->
            <!--</div>-->
            <!--<div class="card-body">-->
            <!--<div id="world-map" style="height: 250px; width: 100%;"></div>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.card-body&ndash;&gt;-->
            <!--<div class="card-footer bg-transparent">-->
            <!--<div class="row">-->
            <!--<div class="col-4 text-center">-->
            <!--<div id="sparkline-1"></div>-->
            <!--<div class="text-white">Visitors</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; ./col &ndash;&gt;-->
            <!--<div class="col-4 text-center">-->
            <!--<div id="sparkline-2"></div>-->
            <!--<div class="text-white">Online</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; ./col &ndash;&gt;-->
            <!--<div class="col-4 text-center">-->
            <!--<div id="sparkline-3"></div>-->
            <!--<div class="text-white">Sales</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; ./col &ndash;&gt;-->
            <!--</div>-->
            <!--&lt;!&ndash; /.row &ndash;&gt;-->
            <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.card &ndash;&gt;-->

            <!--&lt;!&ndash; /.card &ndash;&gt;-->
            <!--</section>-->
            <section class="col-lg-12 connectedSortable">
                <!-- Calendar -->
                <div class="card bg-gradient-success">
                    <div class="card-header border-0">

                        <h3 class="card-title">
                            <i class="far fa-calendar-alt"></i>
                            日历
                        </h3>
                        <!-- tools card -->
                        <div class="card-tools">
                            <!-- button with a dropdown -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
                                    <i class="fas fa-bars"></i></button>
                                <div class="dropdown-menu float-right" role="menu">
                                    <a href="#" class="dropdown-item">添加新事件</a>
                                    <a href="#" class="dropdown-item">清空事件</a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item">查看日历</a>
                                </div>
                            </div>
                            <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <!-- /. tools -->
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body pt-0">
                        <!--The calendar -->
                        <div id="calendar" style="width: 100%"></div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </section>
        </div>

        <!-- Main row -->
        <div class="row">
            <section class="col-lg-12 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-chart-pie mr-1"></i>
                            浏览热度
                        </h3>
                        <div class="card-tools">
                            <ul class="nav nav-pills ml-auto">
                                <!--<li class="nav-item">-->
                                    <!--<a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>-->
                                <!--</li>-->
                                <!--<li class="nav-item">-->
                                    <!--<a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>-->
                                <!--</li>-->
                            </ul>
                        </div>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content p-0">
                            <!-- Morris chart - Sales -->
                            <div class="chart tab-pane active" id="revenue-chart"
                                 style="position: relative; height: 300px;">
                                <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
                            </div>
                            <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                                <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
                            </div>
                        </div>
                    </div><!-- /.card-body -->
                </div>
                <!-- /.card -->

            </section>
        </div>

        <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
</section>
<!-- ChartJS -->
<script th:src="@{admin/plugins/chart.js/Chart.min.js}"></script>
<!-- JQVMap -->
<script th:src="@{admin/plugins/jqvmap/jquery.vmap.min.js}"></script>
<script th:src="@{admin/plugins/jqvmap/maps/jquery.vmap.world.js}"></script>
<!-- Sparkline -->
<script th:src="@{admin/plugins/sparklines/sparkline.js}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script th:src="@{admin/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script>

<!-- dashboard -->
<script th:src="@{admin/js/dashboard.js}"></script>
